import { memo } from 'react';
import { Tooltip } from 'antd';
import './index.less';
import { SettingOutlined } from '@ant-design/icons';
import { globalState } from '@/store/global';
import { useSetRecoilState } from 'recoil';

const Settings = memo(() => {
  const setGlobalState = useSetRecoilState(globalState);
  const toggleSettingPanel = () => {
    setGlobalState((prevState) => ({ ...prevState, showSettings: !prevState.showSettings }));
  };
  return (
    <div className='settings-container'>
      <Tooltip placement='bottom' title='系统设置'>
        {/* <IconSvg name='edit' onClick={toggleSettingPanel} /> */}
        <span onClick={toggleSettingPanel}>
          <SettingOutlined />
        </span>
      </Tooltip>
    </div>
  );
});

export default Settings;
